<template>
  <div>
    <el-form
      ref="emp"
      :model="user"
      :rules="rules"
      label-position="right"
      label-width="100px"
    >
      <el-row>
        <el-col :span="8">
          <div style="display: flex">
            <el-form-item prop="name" label="姓名:">
              <el-input
                size="small"
                class="width150"
                clearable
                prefix-icon="el-icon-edit"
                v-model="user.name"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex">
            <el-form-item label="性别:" prop="sex">
              <el-radio
                size="small"
                v-model="user.sex"
                :label="1"
                style="width: 30px"
                >男</el-radio
              >
              <el-radio
                size="small"
                style="padding-left: 0px"
                v-model="user.sex"
                :label="0"
                >女
              </el-radio>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex">
            <el-form-item label="学院:" prop="dept">
              <el-input
                size="small"
                class="width150"
                clearable
                prefix-icon="el-icon-edit"
                v-model="user.dept"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div style="display: flex">
            <el-form-item label="专业班级:" prop="major">
              <el-input
                size="small"
                class="width150"
                clearable
                prefix-icon="el-icon-edit"
                v-model="user.major"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex">
            <el-form-item label="学号:" prop="sno">
              <el-input
                size="small"
                clearable
                class="width150"
                v-model="user.sno"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex">
            <el-form-item label="电子邮箱:" prop="email">
              <el-input
                size="small"
                prefix-icon="el-icon-message"
                clearable
                class="width150"
                v-model="user.email"
                placeholder="Email电子邮箱"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div style="display: flex">
            <el-form-item label="电话号码:" prop="phone">
              <el-input
                size="small"
                clearable
                class="width150"
                prefix-icon="el-icon-phone"
                v-model="user.phone"
                placeholder="电话号码"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex">
            <el-form-item label="入学日期:" prop="begintime">
              <el-date-picker
                style="width: 150px"
                v-model="user.begintime"
                type="date"
                size="small"
                placeholder="入学日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex">
            <el-form-item label="毕业日期:" prop="endtime">
              <el-date-picker
                style="width: 150px"
                v-model="user.endtime"
                type="date"
                size="small"
                placeholder="毕业日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div style="display: flex">
            <el-form-item label="身份证号码:" prop="idcard">
              <el-input
                size="small"
                clearable
                v-model="user.idcard"
                placeholder="身份证号码"
                prefix-icon="el-icon-edit"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex">
            <el-form-item label="联系地址:" prop="address">
              <el-input
                size="small"
                prefix-icon="el-icon-edit"
                clearable
                v-model="user.address"
                placeholder="联系地址"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display:flex;justify-content:center;">
            <el-button size="small" @click="updateInfo" plain type="warning"
              >更新信息</el-button
            >
            <el-button type="primary" size="small" @click="showDialog"
              >个人事迹</el-button
            >
          </div>
        </el-col>
      </el-row>
      <div>
        <!--            输入信息的表单-->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 竞赛奖励-->
          <el-tab-pane label="竞赛奖励" name="competitionPrize">
            <add-competition-prize
              :urls="urls"
              :user-id="userId"
              :fileList="fileList"
              v-on:clearUrl="clearUrl"
            />
          </el-tab-pane>
          <!-- 课题立项-->
          <el-tab-pane label="课题立项" name="projectEstablish">
            <add-project-establish
              :urls="urls"
              :user-id="userId"
              :fileList="fileList"
              v-on:clearUrl="clearUrl"
            />
          </el-tab-pane>
          <!--学生考取资格证-->
          <el-tab-pane label="资格证书" name="certificates">
            <add-certificates
              :urls="urls"
              :user-id="userId"
              :fileList="fileList"
              v-on:clearUrl="clearUrl"
            />
          </el-tab-pane>
          <!--专利或软件著作权-->
          <el-tab-pane label="专利&软著" name="patent">
            <add-patent
              :urls="urls"
              :user-id="userId"
              :fileList="fileList"
              v-on:clearUrl="clearUrl"
            />
          </el-tab-pane>
          <!-- 发表论文-->
          <el-tab-pane label="发表论文" name="papers">
            <add-papers
              :urls="urls"
              :user-id="userId"
              :fileList="fileList"
              v-on:clearUrl="clearUrl"
            />
          </el-tab-pane>
          <!--学生创新创业团队奖励-->
          <el-tab-pane label="创新创业" name="Innovation">
            <add-innovation
              :urls="urls"
              :user-id="userId"
              :fileList="fileList"
              v-on:clearUrl="clearUrl"
            />
          </el-tab-pane>
          <!--学生注册公司-->
          <el-tab-pane label="注册公司" name="company">
            <add-company
              :urls="urls"
              :user-id="userId"
              :fileList="fileList"
              v-on:clearUrl="clearUrl"
            />
          </el-tab-pane>
          <!--就业考研情况-->
          <el-tab-pane label="就业考研情况" name="achievement">
            <add-achievement
              :urls="urls"
              :user-id="userId"
              :fileList="fileList"
              v-on:clearUrl="clearUrl"
            />
          </el-tab-pane>
          <el-tab-pane
            label="工作室承担的校级竞赛项目及其他培训"
            name="competitionTraining"
          >
            <add-competition-training
              :urls="urls"
              :user-id="userId"
              :fileList="fileList"
              v-on:clearUrl="clearUrl"
            />
          </el-tab-pane>
          <!--工作室承担的校级竞赛项目及其他培训-->
        </el-tabs>
        <!--            分割线-->
        <el-divider></el-divider>
        <!--            上传奖状-->
        <el-row>
          <el-col :span="4">
            <el-upload
              class="upload-demo"
              action="http://upload.likeyunba.com/"
              :auto-upload="false"
              :file-list="fileList"
              multiple
              :limit="5"
              :on-change="handleChange"
              :before-upload="beforeAvatarUpload"
              list-type="picture"
            >
              <el-button size="small" type="primary">上传奖状</el-button>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
            </el-upload>
            <el-button
              size="small"
              type="success"
              @click="test"
              style="margin-top: 5px"
              v-loading.fullscreen.lock="fullscreenLoading"
              >保存</el-button
            >
          </el-col>
        </el-row>
      </div>
      <!--个人赛事经历dialog 默认是隐藏的-->
      <el-dialog
        title="个人事迹"
        :visible.sync="dialogTableVisible"
        width="50%"
      >
        <el-tabs
          v-model="innerActiveName"
          type="card"
          @tab-click="innerHandleClick"
        >
          <el-tab-pane label="竞赛奖励" name="innerCompetitionPrizeExp">
            <competition-prize-exp :user-name="userName" />
          </el-tab-pane>
          <el-tab-pane label="项目立项" name="innerProjectEstablishExp"
            ><project-establist-exp :user-name="userName"
          /></el-tab-pane>
          <el-tab-pane label="考取证书" name="innercertificatesExp">
            <certificates-exp :user-name="userName" />
          </el-tab-pane>
          <el-tab-pane label="专利或证书" name="innerPatentExp"
            ><patent-exp :user-name="userName"
          /></el-tab-pane>
          <el-tab-pane label="发表论文" name="innerPapersExp"
            ><papers-exp :user-name="userName"
          /></el-tab-pane>
          <el-tab-pane label="创新创业" name="innerInnovation"
            ><innovation-exp :user-name="userName"
          /></el-tab-pane>
          <el-tab-pane label="注册公司" name="innerCompany"
            ><company-exp :user-name="userName"
          /></el-tab-pane>
          <el-tab-pane label="就业考研" name="innerAchievement"
            ><achievement-exp :user-name="userName"
          /></el-tab-pane>
        </el-tabs>
      </el-dialog>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import AddCompetitionPrize from "@/views/sys/components/AddStuInfoComponents/AddCompetitionPrize";
import CompetitionPrizeExp from "@/views/sys/components/MyCompetitionExperienceComponents/CompetitionPrizeExp";
import AddCertificates from "@/views/sys/components/AddStuInfoComponents/AddCertificates";
import AddProjectEstablish from "@/views/sys/components/AddStuInfoComponents/AddProjectEstablish.vue";
import CertificatesExp from "@/views/sys/components/MyCompetitionExperienceComponents/CertificatesExp.vue";
import AddInnovation from "@/views/sys/components/AddStuInfoComponents/AddInnovation.vue";
import AddAchievement from "@/views/sys/components/AddStuInfoComponents/AddAchievement.vue";
import AddPapers from "@/views/sys/components/AddStuInfoComponents/AddPapers.vue";
import AddPatent from "@/views/sys/components/AddStuInfoComponents/AddPatent.vue";
import AddCompany from "@/views/sys/components/AddStuInfoComponents/AddCompany.vue";
import AddCompetitionTraining from "@/views/sys/components/AddStuInfoComponents/AddCompetitionTraining.vue";
import AchievementExp from "@/views/sys/components/MyCompetitionExperienceComponents/AchievementExp.vue";
import CompanyExp from "@/views/sys/components/MyCompetitionExperienceComponents/CompanyExp.vue";
import ProjectEstablistExp from "@/views/sys/components/MyCompetitionExperienceComponents/ProjectEstablistExp.vue";
import InnovationExp from "@/views/sys/components/MyCompetitionExperienceComponents/InnovationExp.vue";
import PatentExp from "@/views/sys/components/MyCompetitionExperienceComponents/PatentExp.vue";
import PapersExp from "@/views/sys/components/MyCompetitionExperienceComponents/PapersExp.vue";

export default {
  components: {
    AddCompetitionPrize,
    CompetitionPrizeExp,
    AddCertificates,
    AddProjectEstablish,
    CertificatesExp,
    AddInnovation,
    AddAchievement,
    AddPapers,
    AddPatent,
    AddCompany,
    AddCompetitionTraining,
    AchievementExp,
    CompanyExp,
    ProjectEstablistExp,
    InnovationExp,
    PatentExp,
    PapersExp,
  },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: "",
          sex: "",
          idcard: "",
          dept: "",
          email: "",
          phone: "",
          address: "",
          sno: "",
          major: "",
          begintime: "",
          endtime: "",
          faceId: "",
        };
      },
    },
  },
  data() {
    return {
      competitionInfo: [],
      fileList: [],
      fullscreenLoading: false,
      activeName: "competitionPrize",
      innerActiveName: "innerCompetitionPrizeExp",
      dialogTableVisible: false,
      urls: [],
      url: "", //保存图片url
      // 用户id
      userId: JSON.parse(window.sessionStorage.getItem("user")).id,
      // 用户姓名
      userName: JSON.parse(window.sessionStorage.getItem("user")).name,
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        idcard: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          { min: 18, max: 18, message: "长度必须为18位", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入电子邮箱", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        address: [
          { required: true, message: "请输入家庭住址", trigger: "blur" },
        ],
        begintime: [
          { required: true, message: "请选择入学日期", trigger: "change" },
        ],
        endtime: [
          { required: true, message: "请选择毕业日期", trigger: "change" },
        ],
        dept: [
          { required: true, message: "请输入学院名称", trigger: "change" },
        ],
        major: [
          { required: true, message: "请输入专业班级", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    updateInfo() {
      this.putRequest("/info/", this.user).then((resp) => {
        if (resp) {
          window.sessionStorage.removeItem("user");
          window.sessionStorage.setItem("user", JSON.stringify(this.user));
        }
      });
    },
    /**
     * 打开个人赛事经历框
     **/
    showDialog() {
      this.dialogTableVisible = true;
    },
    /**
     * 标签切换触发事件，切换标签页时清空用户上传的图片url
     **/
    handleClick() {
      if (this.urls.length != 0) {
        this.$confirm("是否要清除刚才保存但未提交的奖状数据？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.urls = [];
          this.$message({
            type: "info",
            message: "已清除",
          });
        });
      }
    },
    /**
     * 上传奖状相关方法
     **/
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    test() {
      if (this.fileList.length <= 0) {
        this.$message.warning("请选择上传文件！");
      } else {
        this.fullscreenLoading = true;
        this.urls = [];
        for (let i = 0; i < this.fileList.length; i++) {
          const axiosInstance = axios.create({});
          let data = new FormData();
          if (this.beforeAvatarUpload(this.fileList[i].raw)) {
            data.append("file", this.fileList[i].raw);
            axiosInstance({
              method: "post",
              url: "/studentInfo/uploadHonorary",
              data: data,
            })
              .then((resp) => {
                if (resp) {
                  this.urls.push(resp.data.obj);
                }
              })
              .catch((e) => {
                this.$message.error("保存失败！");
                this.fullscreenLoading = false;
                return;
              });
          }
        }
        this.$message.success("保存成功，点击上方提交按钮即可保存到数据库！");
        this.fileList = [];
        this.fullscreenLoading = false;
      }
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    /**
     * 点击课题立项的提交按钮触发事件
     **/
    handleProjectEstablishAddBtn() {
      this.projectEstablish.userId = this.userId;
      this.postRequest("/studentInfo/projectEstablish", this.projectEstablish);
      this.projectEstablish = {};
    },
    /**
     * 点击课题立项的取消按钮触发事件
     **/
    handleProjectEstablishResetBtn() {
      this.projectEstablish = {};
    },
    /**
     * 个人塞事奖励tabs点击事件
     */
    innerHandleClick() {},
    /**
     *  提交后清空url记录
     */
    clearUrl() {
      this.urls = [];
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.item > span {
  display: block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
  border-radius: 8px;
}
</style>
